<template>
  <div class="category-body">
    <div class="main-view" v-if="categoryList.length != 0">
      <!-- 侧边导航 -->
      <div class="slide-box">
        <slide-bar
          :list="categoryList"
          :actived="actived"
          @switchCategory="togCategory"
        />
      </div>

      <!-- 分类产品 -->
      <div class="category-box">
        <div v-if="categoryList.length != 0">
          <category-list :list="getCategoryDetail" />
        </div>
      </div>
    </div>

    <div class="loading-tips" v-else>
      <mt-spinner type="snake"></mt-spinner>
    </div>
  </div>
</template>

<script>
import SlideBar from "components/common/SlideBar.vue";
import CategoryList from "components/content/CategoryList.vue";

export default {
  data() {
    return {
      actived: 0,
      categoryList: [],
    };
  },
  created() {
    this.getCategoryList();

    window.pj1715 = (res) => {
      if (res.errCode == "0") {
        this.categoryList = res.keywordAreas;
        console.log(this.categoryList);
      }
    };
  },
  methods: {
    getCategoryList() {
      this.$jsonp(
        "https://wq.360buyimg.com/data/coss/keyword/project/mpj1715.jsonp"
      ).catch((err) => {
        console.log(err);
      });
    },
    togCategory(idx) {
      this.actived = idx;
    },
  },
  computed: {
    getCategoryDetail() {
      return this.categoryList[this.actived];
    },
  },
  components: {
    SlideBar,
    CategoryList,
  },
};
</script>

<style scoped>
.loading-tips /deep/ .mint-spinner-snake {
  margin: 0 auto;
  border-top-color: rgb(38 162 255 / 20%) !important;
  border-left-color: rgb(38 162 255 / 20%) !important;
  border-bottom-color: rgb(38 162 255 / 20%) !important;
}
.loading-tips {
  text-align: center;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: rgb(38 162 255 / 20%);
  padding: 25px 15px;
  border-radius: 10px;
  color: var(--theme);
  box-shadow: 0 0 14px rgb(38 162 255 / 10%);
}
.loading-tips::after {
  content: "数据加载中……";
}
.category-body /deep/ .main-view {
  height: var(--viewport-height);
  overflow: hidden;
  display: grid;
  grid-template-columns: 21% 79%;
}
.category-box,
.slide-box {
  height: var(--viewport-height);
  overflow-y: auto;
  overflow-x: hidden;
}
.category-box {
  margin-left: 8px;
  margin-right: 8px;
}
</style>